<template>
	<div class="wrapper">
		<swiper :options="swiperOption">
	    <!-- slides -->
		    <swiper-slide v-for="item of swiperList" :key="item.id"><img class="swiper-img" :src='item.imgUrl'></swiper-slide>
	    <!-- Optional controls -->
	    	<div class="swiper-pagination"  slot="pagination"></div>
	  	</swiper>
	</div>
</template>

<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		name: "HomeSwiper",
		data() {
			return {
				swiperOption: {
					pagination:'.swiper-pagination',
					loop: true
				},
				swiperList :[{
					id: '001',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/6c/b1b8677dc1886d02.jpg_750x200_1931f6c4.jpg'
				},{
					id: '002',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/9d/a6e922acbb4c9802.jpg_750x200_74080b0c.jpg'
				},{
					id: '003',
					imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/6c/b1b8677dc1886d02.jpg_750x200_1931f6c4.jpg'
				}]
			}

		},
		components: {
			swiper,
			swiperSlide
		}
	}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
	background: #fff 
.wrapper
	width:100%
	height:0
	overflow:hidden
	padding-bottom:26.7%
	background-color:#eee
	.swiper-img
		width:100%
		touch-action: none
</style>